<template>
  <div class="device-type-count">
    <div class="left">
      <div id="piec"></div>
      <div class="legend">
        <span style="background:#1595FF;box-shadow: 0px 6px 5px #1595FF;"></span>
        未处理
        <span style="background:#1DF5F8;box-shadow: 0px 6px 5px #1DF5F8;"></span>
        已处理
      </div>
    </div>
    <div class="right">
      <device-type-count-table :schedule="schedule"></device-type-count-table>
    </div>
  </div>
</template>

<script>
import DeviceTypeCountTable from './DeviceTypeCountTable'
import Config from '../../../config'
export default {
  props: ['schedule'],
  name: 'DeviceTypeCount',
  components: {
    DeviceTypeCountTable
  },
  data() {
    return {
      datas: []
    }
  },
  watch: {
    schedule() {
      this.message().then(() => {
        this.pie()
      })
    }
  },
  methods: {
    message() {
      return new Promise((resolve) => {
        let url = `${Config.FIREPLUG_APP_URL}/fireplug/alarm/search?page=0&size=1`

        // 未处理
        let param = {
          site_type: 'official',
          // latest : true,
          sort: 'ts desc'
        }
        // 已处理
        let params = {
          site_type: 'official',
          latest: true,
          sort: 'ts desc'
        }

        this.$http.post(url, param).then((res) => {
          this.$http.post(url, params).then((ress) => {
            this.datas.push({ value: res.total, name: '未处理' })
            this.datas.push({ value: ress.total, name: '已处理' })
            resolve()
          })
        })
      })
    },
    pie() {
      const dom = document.getElementById("piec")
      if (!dom) {
        return
      }
      let chart = this.$echarts.init(dom)
      chart.setOption({
        title: {//标题组件
          text: '报警处理统计',
          // left:'50px',//标题的位置 默认是left，其余还有center、right属性
          textStyle: {
            color: "#598CC9",
            fontSize: 14,
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name: '报警处理统计',
            type: 'pie',
            clockwise:false,
            animationDuration: 1500,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              borderWidth: 3, //设置border的宽度有多大
              borderColor: '#050E2A',
            },
            data: this.datas
          }
        ],
        // 颜色
        color: [
          new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0,
            color: '#179aff'
          }, {
            offset: 1,
            color: '#0054ff'
          }]),
          new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0,
            color: '#1bc1ff'
          }, {
            offset: 1,
            color: '#1efff7'
          }])
        ],
      })
    }
  },
  mounted() {
    // this.pie()
  }
}
</script>

<style lang="scss" scoped>
.device-type-count {
  width: 100%;
  height: 100%;
  div {
    float: left;
    height: 100%;
  }
  .left {
    width: 35%;
    #piec {
      width: 100%;
      height: 100%;
    }
    // 图例
    .legend {
      width: 186px;
      height: 20px;
      position: absolute;
      bottom: 20px;
      left: 16px;
      color: #598cc9;
      font-size: 12px;
      span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-left: 20px;
      }
    }
  }
  .right {
    width: 65%;
  }
}
</style>
